<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>{{ order.identifier }}</title>
  <style type="text/css">
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }

    a {
      color: #5D6975;
      text-decoration: underline;
    }

    body {
      position: relative;
      margin: 0 auto;
      color: #001028;
      background: #FFFFFF;
      font-family: Arial, sans-serif;
      font-size: 12px;
      font-family: Arial;
    }

    header {
      padding: 10px 0;
      margin-bottom: 30px;
    }

    #logo {
      font-size: 1.5rem;
      color: #555;
      text-align: center;
      margin-bottom: 10px;
    }

    #logo img {
      width: 90px;
    }

    h1 {
      border-top: 1px solid #5D6975;
      border-bottom: 1px solid #5D6975;
      color: #5D6975;
      font-size: 2.4em;
      line-height: 1.4em;
      font-weight: normal;
      text-align: center;
      margin: 0 0 20px 0;
    }

    #project {
      float: left;
    }

    #project span {
      color: #5D6975;
      text-align: right;
      width: 65px;
      margin-right: 10px;
      margin-left: 10px;
      display: inline-block;
      font-size: 0.8em;
      vertical-align: top;
      padding-top: 2px;
    }

    #company {
      float: right;
    }

    #company span {
      color: #5D6975;
      text-align: right;
      width: 65px;
      margin-right: 10px;
      margin-left: 10px;
      display: inline-block;
      font-size: 0.8em;
      vertical-align: top;
      padding-top: 2px;
    }

    #project div,
    #company div {
      white-space: nowrap;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      margin-bottom: 20px;
      font-size: 0.8em;
    }

    table tr:nth-child(2n+1) td {
      background: #F5F5F5;
    }

    table th,
    table td {
      text-align: center;
    }

    table th {
      padding: 5px 20px;
      color: #5D6975;
      border-bottom: 1px solid #C1CED9;
      white-space: nowrap;
      font-weight: normal;
    }

    table .service,
    table .desc {
      text-align: left;
    }

    table .fees {
      text-align: right;
    }

    table td {
      padding: 20px;
      text-align: right;
    }

    table td.service,
    table td.desc {
      vertical-align: top;
    }

    table td.desc,
    table td.sales {
      font-size: .8em;
      background-color: hotpink;
      border: 5px;
    }

    table td.grand {
      border-top: 1px solid #5D6975;
      ;
    }

    #notices .notice {
      color: #5D6975;
      font-size: 1.2em;
    }

    .preserve-newline {
      white-space: pre !important;
    }

    .tax {
      font-size: 0.7em;
      color: #5D6975;
    }

    .strikethrough {
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <div id="logo">
    {% if admin_info.admin_billing_logo %}
    <img src="{{admin_info.admin_billing_logo}}" alt="organization logo" /><br>
    {% else %}
    {{ admin_info.app_name }}
    {% endif %}
  </div>
  <header class="clearfix">
    <h1>{{ _('Order Confirmation') }} {{order.created_at.strftime("%Y")}}E-{{ event.identifier }}{{'%06d' |
      format(event.tickets_placed_or_completed_count)}}</h1>
    {% if order.status != "deleted" %}
    <div id="company" class="clearfix">
      {% if event.tax.registered_company %}
      <div><span>{{ _('Organisation') }}</span>{{ event.tax.registered_company or '' }}</div>
      {% endif %}
      {% if event.tax.contact_name %}
      <div><span>{{ _('Contact Name') }}</span>{{ event.tax.contact_name }}</div>
      {% endif %}
      {% if event.tax.address %}
      <div><span>{{ _('Address') }}</span>{{ event.tax.address }}</div>
      {% endif %}
      {% if event.tax.city %}
      <div><span>{{ _('City') }}</span>{{ event.tax.city }}</div>
      {% endif %}
      {% if event.tax.state %}
      <div><span>{{ _('State') }}</span>{{ event.tax.state }}</div>
      {% endif %}
      {% if event.tax.zip %}
      <div><span>{{ _('ZIP') }}</span>{{ event.tax.zip }}</div>
      {% endif %}
      {% if event.tax.country %}
      <div><span>{{ _('Country') }}</span>{{ event.tax.country }}</div>
      {% endif %}
      {% if event.tax.phone %}
      <div><span>{{ _('Phone') }}</span>{{ event.tax.phone }}</div>
      {% endif %}
      {% if event.tax.email %}
      <div><span>{{ _('Email') }}</span>{{ event.tax.email }}</div>
      {% endif %}
      {% if event.tax.tax_id %}
      <div><span>{{ _('Tax ID') }}</span>{{ event.tax.tax_id }}</div>
      {% endif %}
    </div>
    <div id="project">
      <div><span>{{ _('Order Number') }} </span> {{ order.get_invoice_number() }}</div>
      <div><span>{{ _('Order By') }}</span>
        {% if order.user and order.user.first_name and order.user.last_name %}
        {{ order.user.fullname }}
        {% elif order.user %}
        {{ order.user.email }}
        {% else %}
        {{ _('Information unavailable') }}
        {% endif %}
      </div>
      {% if order.user.email %}
      <div><span> {{ _('Email') }}</span>
        {{ order.user.email }}
      </div>
      {% endif %}
      <div><span> {{ _('Payment Status') }}</span>
        {% if order.status == 'completed' %}
        {{ _('Completed') }}
        {% elif order.status == 'pending' or order.status == 'initialized' %}
        {{ _('Pending') }}
        {% elif order.status == 'placed' %}
        {{ _('Placed') }}
        {% elif order.status == 'cancelled' %}
        {{ _('Cancelled') }}
        {% elif order.status == 'expired' %}
        {{ _('Expired') }}
        {% else %}
        {{ order.status | capitalize }}
        {% endif %}
      </div>
      {% if order.company %}
      <div><span> {{ _('Organisation') }}</span>
        {{ order.company }}
      </div>
      {% endif %}
      {% if order.address %}
      <div><span> {{ _('Address') }}</span>
        {{ order.address }}
      </div>
      {% endif %}
      {% if order.city %}
      <div><span> {{ _('City') }}</span>
        {{ order.city }}
      </div>
      {% endif %}
      {% if order.state %}
      <div><span> {{ _('State') }}</span>
        {{ order.state }}
      </div>
      {% endif %}
      {% if order.zipcode %}
      <div><span> {{ _('ZIP') }}</span>
        {{ order.zipcode }}
      </div>
      {% endif %}
      {% if order.country %}
      <div><span> {{ _('Country') }}</span>
        {{ order.country }}
      </div>
      {% endif %}
      {% if order.tax_business_info %}
      <div><span> {{ _('Tax ID') }}</span>
        {{ order.tax_business_info }}
      </div>
      {% endif %}
      <div><span> {{ _('Date') }}</span>
        {{ created_at }}
      </div>
      <div><span>{{ _('Payment Mode') }}</span>
        {% if order.payment_mode == 'free' %}
        {{ _('None') }}
        {% elif order.payment_mode == 'stripe' %}
        {{ _('Stripe') }}
        {% elif order.payment_mode == 'paypal' %}
        {{ _('Paypal') }}
        {% elif order.payment_mode == 'bank' %}
        {{ _('Bank') }}
        {% elif order.payment_mode == 'cheque' %}
        {{ _('Cheque') }}
        {% elif order.payment_mode == 'onsite' %}
        {{ _('Onsite') }}
        {% elif order.payment_mode == 'omise' %}
        {{ _('Omise') }}
        {% elif order.payment_mode == 'alipay' %}
        {{ _('Alipay') }}
        {% elif order.payment_mode == 'paytm' %}
        {{ _('Paytm') }}
        {% elif order.payment_mode == 'invoice' %}
        {{ _('Purchase on Invoice') }}
        {% else %}
        {{ order.payment_mode | capitalize }}
        {% endif %}
      </div>
      <div>
        <span>{{ _('Due Date') }}</span>
        {{ _('Upon Invoice') }}
      </div>
    </div>
    {% endif %}
  </header>
  <main>
    <table>
      <thead>
        <tr>
          <th>{{ _('Description') }}</th>
          <th>{{ _('Price') }}</th>
          <th>{{ _('Quantity') }}</th>
          <th>{{ _('Sub-Total') }}</th>
        </tr>
      </thead>
      <tbody>
        {% for order_ticket in order_amount.tickets %}
        <tr>
          <td class="service">{{ _('Ticket') }}: {{ order_ticket.name }} {{ _('for') }} {{ event.name }}, {{
            event_starts_at }}
            <br />
            {% if order_ticket.discount %}
              {{ _('Discount Code') }}: {{ order_ticket.discount.code }}
              {% if order_ticket.discount.type=='amount' %}
                ({{ event.payment_currency }} {{ "%.2f" | format(order_ticket.discount.amount) }})
              {% else %}
                {% if order_ticket.discount.percent.is_integer %}
                  ({{ "%.0f" | format(order_ticket.discount.percent) }}%)
                {% else %}
                  ({{ "%.1f" | format(order_ticket.discount.percent) }}%)
                {% endif %}
              {% endif %}
            {% endif %}
          </td>
          <td class="total">
            <div class="{{'strikethrough' if order_ticket.discount}}">
              {% if order_ticket.price %}
              {{ event.payment_currency }}
              {% endif %}
              {{ "%.2f" | format(order_ticket.price) }}
              {% if order_amount.tax and order_amount.tax.name and order_amount.tax.percent %}
                <div class="{{'strikethrough' if order_ticket.discount}} tax">
                  {% if order_ticket.ticket_tax %}
                    {% if order_amount.tax.included %}
                      {{ _('incl.') }} {{ event.payment_currency }} {{ "%.2f" | format(order_ticket.ticket_tax) }} ({{ order_amount.tax.name }})
                    {% else %}
                      + {{ event.payment_currency }} {{ "%.2f" | format(order_ticket.ticket_tax) }} ({{ order_amount.tax.name }})
                    {% endif %}
                  {% else %}
                  0.00
                  {% endif %}
                </div>
              {% endif %}
            </div>
            {% if order_ticket.discount %}
              <br/>
              <div>
                {% if order_ticket.price %}
                {{ (order_ticket.price - order_ticket.discount.amount) | money(order.user.email, event.payment_currency) }}
                {% endif %}
                {% if order_amount.tax and order_amount.tax.name and order_amount.tax.percent %}
                  <div class="tax">
                    {% if order_ticket.ticket_tax %}
                      {% if order_amount.tax.included %}
                        {{ _('incl.') }} {{ order_ticket.discounted_tax | money(order.user.email, event.payment_currency) }} ({{ order_amount.tax.name }})
                      {% else %}
                        + {{ order_ticket.discounted_tax | money(order.user.email, event.payment_currency) }} ({{ order_amount.tax.name }})
                      {% endif %}
                    {% else %}
                    0.00
                    {% endif %}
                  </div>
                {% endif %}
              </div>
            {% endif %}
          </td>
          <td>{{ order_ticket.quantity }}</td>
          <td class="total">
            {% if order_ticket.price %}
              {{ order_ticket.sub_total | money(order.user.email, event.payment_currency) }}
            {% else %}
              0.0
            {% endif %}
            <br>
            {% if order_amount.tax and order_amount.tax.name and order_amount.tax.percent %}
              <div class="tax">
                {% if order_ticket.price %}
                  {% if order_ticket.discount %}
                    {% if tax.included %}
                      {{ _('incl.') }} {{ event.payment_currency }} {{ "%.2f" | format(order_ticket.quantity*order_ticket.discounted_tax) }} ({{ order_amount.tax.name }})
                    {% else %}
                      + {{ event.payment_currency }} {{ "%.2f" | format(order_ticket.quantity*order_ticket.discounted_tax) }} ({{ order_amount.tax.name }})
                    {% endif %}
                  {% else %}
                    {% if tax.included %}
                      {{ _('incl.') }} {{ event.payment_currency }} {{ "%.2f" | format(order_ticket.quantity*order_ticket.ticket_tax) }} ({{ order_amount.tax.name }})
                    {% else %}
                      + {{ event.payment_currency }} {{ "%.2f" | format(order_ticket.quantity*order_ticket.ticket_tax) }} ({{ order_amount.tax.name }})
                    {% endif %}
                  {% endif %}
                {% else %}
                0.00
                {% endif %}
              </div>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
        <tr>
          <td></td>
          <td></td>
          <td class="grand total"><b>{{ _('Total') }}</b></td>
          <td class="grand total">
            {% if order_amount.sub_total %}
              {{ order_amount.sub_total | money(order.user.email, event.payment_currency) }}
            {% else %}
              0.0
            {% endif %}
          </td>
        </tr>
        {% if order_amount.tax and order_amount.tax.name and order_amount.tax.percent %}
        <tr>
          <td></td>
          <td></td>
          <td class="grand total"><b>{{ _('Tax') }}
            {% if order_amount.tax.percent.is_integer %}
              ({{ "%.0f" | format(order_amount.tax.percent) }}%
            {% else %}
              ({{ "%.2f" | format(order_amount.tax.percent) }}
            {% endif %}
            {{ order_amount.tax.name }})
            {% if order_amount.tax.included %}
              <br/>
              <div class="tax">
                {{ _('Included in Total') }}
              </div>
            {% endif %}
          </b></td>
          <td class="grand total">
            {{ order_amount.tax.amount | money(order.user.email, event.payment_currency) }}
          </td>
        </tr>
        {% endif %}
        <tr>
          <td></td>
          <td></td>
          <td class="grand total"><b>{{ _('Grand Total') }}</b></td>
          <td class="grand total">
            {% if order_amount.total %}
              {{ order_amount.total | money(order.user.email, event.payment_currency) }}
            {% else %}
              0.0
            {% endif %}
          </td>
        </tr>
      </tbody>
    </table>
    <br />
    {% if tax.invoice_footer %}
    <div id="notices">
      <div class="notice">{{ tax.invoice_footer }}</div>
    </div>
    {% endif %}
  </main>
</body>

</html>